<template>
  <div>
    <el-card style="margin-top: 25px" shadow="never" class="box-card box-card1">
      <el-steps :active="status" align-center>
        <el-step title="待付款" :description="datalist.createTime"></el-step>
        <el-step title="待发货" :description="datalist.paymentTime"></el-step>
        <el-step title="待收货" :description="datalist.deliveryTime"></el-step>
        <el-step title="已收货" :description="datalist.receiveTime"></el-step>
        <el-step title="已关闭" :description="datalist.finishTime"></el-step>
      </el-steps>
    </el-card>
    <el-card style="margin-top: 25px" shadow="never" class="box-card box-card1">
      <div slot="header" class="clearfix">
        <span style="font-weight: 900">订单信息 </span>
        <el-tag :type="datalist.status | status">{{
          datalist.status | orderProcessText
        }}</el-tag>
      </div>
      <div class="text item">
        <el-row style="margin-top: 10px">
          <el-col :span="6">订单金额: {{ datalist.totalAmount }}</el-col>
          <el-col :span="6">订单编号: {{ datalist.id }}</el-col>
          <el-col :span="6">用户账号: {{ datalist.memberUsername }}</el-col>
          <el-col :span="6">订单备注: {{ datalist.note }}</el-col>
        </el-row>
        <el-row style="margin-top: 10px">
          <el-col :span="6">下单时间: {{ datalist.createTime }}</el-col>
          <el-col :span="6">付款时间: {{ datalist.paymentTime }}</el-col>
          <el-col :span="6">发货时间: {{ datalist.deliveryTime }}</el-col>
          <el-col :span="6">收货时间: {{ datalist.receiveTime }}</el-col>
        </el-row>
      </div>
    </el-card>
    <el-card style="margin-top: 25px" shadow="never" class="box-card box-card1">
      <div slot="header" class="clearfix">
        <span>收货人信息 </span>
      </div>
      <div class="text item">
        <el-row style="margin-top: 10px">
          <el-col :span="6">收货姓名: {{ datalist.receiverName }}</el-col>
          <el-col :span="6">用户姓名: {{ datalist.memberUsername }}</el-col>
          <el-col :span="6">手机号码: {{ datalist.receiverPhone }}</el-col>
          <el-col :span="6">邮政编码: {{ datalist.receiverPostCode }}</el-col>
        </el-row>
        <el-row style="margin-top: 10px">
          <el-col :span="6"
            >基础地址: {{ datalist.receiverProvince }}
            {{ datalist.receiverRegion }} {{ datalist.receiverCity }}</el-col
          >
          <el-col :span="6"
            >详细地址: {{ datalist.receiverDetailAddress }}</el-col
          >
          <!-- <el-col :span="6">发货时间: {{ datalist.deliveryTime }}</el-col>
          <el-col :span="6">收货时间: {{ datalist.receiveTime }}</el-col> -->
        </el-row>
      </div>
    </el-card>
    <el-card
      style="border: 1px solid #fff; margin-top: 25px"
      shadow="never"
      class="box-card"
      v-if="datalist.status != 0"
    >
      <div slot="header" class="clearfix">
        <span style="font-weight: 900">商品信息</span> 
      </div>
      <div class="text item">
        <el-table :data="goodslist" border>
          <el-table-column
            align="center"
            property="productName"
            label="商品名称"
          ></el-table-column>
          <el-table-column align="center" property="name" label="商品图片">
            <template slot-scope="scope">
              <el-image
                style="wdith: 150px; height: 150px"
                :src="scope.row.productPic"
                :lazy="true"
              ></el-image>
            </template>
          </el-table-column>
          <el-table-column align="center" property="productBrand" label="品牌">
          </el-table-column>
          <el-table-column align="center" property="productPrice" label="价格">
          </el-table-column>
          <el-table-column
            align="center"
            property="productQuantity"
            label="商品数量"
          >
          </el-table-column>
          <el-table-column
            align="center"
            property="totalPrice"
            label="是否退货"
          >
            <template slot-scope="scope">
              <el-tag class="tag" v-if="scope.row.isReturn == 0" type="">否</el-tag>
              <el-tag
                @click="tobackInfo(scope.row.returnId)"
                v-else
                type="danger"
                class="tag"
                >是</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column align="center" property="totalPrice" label="小计">
          </el-table-column>
        </el-table>
      </div>
    </el-card>
    <el-card style="margin-top: 25px" shadow="never" class="box-card box-card1">
      <div slot="header" class="clearfix">
        <span style="font-weight: 900">费用信息 </span>
      </div>
      <div class="text item">
        <el-row style="margin-top: 10px">
          <el-col :span="6"
            >运费金额:
            <span style="color: red">{{ datalist.receiverName }}</span></el-col
          >
          <el-col :span="6"
            >订单金额:
            <span style="color: red">{{
              datalist.memberUsername
            }}</span></el-col
          >
          <el-col :span="6"
            >实际金额:
            <span style="color: red">{{ datalist.receiverPhone }}</span></el-col
          >
          <el-col :span="6"
            >促销优惠价格:
            <span style="color: red">{{
              datalist.receiverPostCode
            }}</span></el-col
          >
        </el-row>
      </div>
    </el-card>
    <el-card
      v-if="
        datalist.status == 2 || datalist.status == 3 || datalist.status == 4
      "
      style="margin-top: 25px"
      shadow="never"
      class="box-card box-card1"
    >
      <div slot="header" class="clearfix">
        <span style="font-weight: 900">物流信息: </span>
        <span
          >{{ datalist.deliveryCompany }}
          <span style="color: red">{{ datalist.deliverySn }}</span></span
        >
      </div>
      <div class="text item">
        <el-table :data="tableData" border>
          <el-table-column
            prop="date"
            align="center"
            label="时间"
            width="200px"
          >
          </el-table-column>
          <el-table-column prop="status" align="center" label="状态">
          </el-table-column>
          <el-table-column prop="note" align="center" label="备注">
          </el-table-column>
        </el-table>
      </div>
    </el-card>
    <el-card
      v-if="datalist.status == 1"
      style="margin-top: 25px"
      shadow="never"
      class="box-card box-card1"
    >
      <div class="text item">
        <el-row :gutter="24">
          <el-col :span="12" :offset="0">
            物流公司:
            <el-select
              style="margin-left: 10px"
              v-model="sendmessage.deliveryCompany"
              placeholder="请选择"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="12" :offset="0">
            订单编号:
            <el-input
              style="width: 300px; margin-left: 10px"
              v-model="sendmessage.deliverySn"
              placeholder="请输入订单编号"
            ></el-input
          ></el-col>
        </el-row>
      </div>
    </el-card>
    <el-card
      style="margin-top: 25px; pandding: 20px 0"
      shadow="never"
      class="box-card box-card1"
      v-if="
        datalist.status == 2 || datalist.status == 3 || datalist.status == 1
      "
    >
      <div style="text-align: center" class="text item">
        <el-button v-if="datalist.status == 1" @click="sendGoods" type="primary"
          >确认发货</el-button
        >
        <span v-if="datalist.status == 2">
          <el-button v-if="getIsShow == true" @click="get" type="warning"
            >强制收货</el-button
          >
        </span>

        <el-button v-if="datalist.status == 3" @click="close" type="danger"
          >关闭订单</el-button
        >
      </div>
    </el-card>
  </div>
</template>

<script>
import orderInfoApi from "@/api/order/orderList/index";
export default {
  components: {},

  data() {
    return {
      id: "",
      status: 0,
      getIsShow: true,
      datalist: [],
      goodslist: [],
      tableData: [
        {
          date: "2015-03-06 21:16:58",
          status: "深圳市横岗速递营销部已揽件",
          note: "揽件员姓名:仲丁基, 联系电话:13838386868",
        },
        {
          date: "2015-03-07 14:25:00",
          status: "到达黄刘转运站处理中心",
          note: "",
        },
        {
          date: "2015-03-08 00:17:00",
          status: "到达广东速递物流公司广航中心处理中心(经转)",
          note: "",
        },
        {
          date: "2015-03-0801:15:00",
          status: "离开广州市发往北京市(经转)",
          note: "",
        },
        {
          date: "2015-03-09 09:01:00",
          status: "到达北京黄村转运站处理中心(经转)",
          note: "",
        },
        {
          date: "2015-03-0918:39:00",
          status: "离开北京市发往呼和浩特市(经转)",
          note: "",
        },
        {
          date: "2015-03-10 18:06:00",
          status: "到达呼和浩特市处理中心",
          note: "",
        },
        {
          date: "2015-03-1109:53:48",
          status: "呼和浩特市邮政速递物流分公司金川揽投部安排投递",
          note: "派件员姓名:宋晓丽, 联系电话:183838686",
        },
      ],
      sendmessage: {
        deliverySn: "",
        deliveryCompany: "",
        orderId: "",
      },
      options: [
        {
          value: "顺丰快递",
          label: "顺丰快递",
        },
        {
          value: "京东快递",
          label: "京东快递",
        },
        {
          value: "苏宁快递",
          label: "苏宁快递",
        },
        {
          value: "圆通快递",
          label: "圆通快递",
        },
        {
          value: "申通快递",
          label: "申通快递",
        },
        {
          value: "韵达快递",
          label: "韵达快递",
        },
        {
          value: "百世快递",
          label: "百世快递",
        },
      ],
    };
  },
  filters: {
    orderProcessText(process) {
      var text = "等待处理";
      switch (JSON.stringify(process)) {
        case "0":
          text = "待付款";
          break;
        case "1":
          text = "待发货";
          break;
        case "2":
          text = "已发货";
          break;
        case "3":
          text = "已完成";
          break;
        case "4":
          text = "已关闭";
          break;
        case "5":
          text = "无效订单";
          break;
        default:
          break;
      }
      return text;
    },
    status(process) {
      var text = "";
      switch (JSON.stringify(process)) {
        case "0":
          text = "danger";
          break;
        case "1":
          text = "";
          break;
        case "2":
          text = "";
          break;
        case "3":
          text = "info";
          break;
        case "4":
          text = "warning";
          break;
        case "5":
          text = "info";
          break;

        default:
          break;
      }
      return text;
    },
  },
  created() {
    this.id = this.$route.query.orderId;
    this.sendmessage.orderId = this.$route.query.orderId;
    console.log(this.id);
    this.init();
  },

  mounted() {},

  methods: {
    // 到退单详细页面
    tobackInfo(ids) {
      this.$router.push({
        name: "backDetail",
        query: {
          id: ids,
        },
      });
    },
    close() {
      orderInfoApi.finishOrder(this.id).then((res) => {
        console.log(res);
        if (res.success) {
          this.$message.success("确认收货成功");
          this.init();
        } else {
          this.$message.error(res.message);
        }
      });
    },
    get() {
      orderInfoApi.receiveProductsForce(this.id).then((res) => {
        console.log(res);
        if (res.success) {
          this.$message.success("确认收货成功");
          this.init();
        } else {
          this.$message.error(res.message);
        }
      });
    },
    //   发货
    sendGoods() {
      orderInfoApi.sendDone(this.sendmessage).then((res) => {
        console.log(res);
        if (res.success) {
          this.$message.success("确认发货成功");
          this.init();
        } else {
          this.$message.error(res.message);
        }
      });
    },
    //   获取数据
    init() {
      orderInfoApi.orderDetail(this.id).then((res) => {
        console.log(res);
        this.datalist = res.data.orderDetail.orderBase;
        this.goodslist = res.data.orderDetail.orderItems;
        this.status = res.data.orderDetail.orderBase.status + 1;
        res.data.orderDetail.orderItems.forEach((el) => {
          if (el.isReturn == 0) {
            this.getIsShow = false;
          }
        });
      });
    },
  },

  computed: {},

  watch: {},
};
</script>

<style scoped lang='scss'>
.box-card {
  width: 97%;
  margin: 15px auto;
  margin-bottom: 10px;
}
.tag{
  cursor: pointer;
}
</style>